<script setup>
import { reactive, ref } from 'vue'
import { addActs } from '../../api/activity'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const form = reactive({
    name: '',
    des: '',
    url: '',
    id: '',
    color: '',
    num: '',
    location: ''
})

const rules = reactive({
    name: [{
        required: true,
        message: '请输入活动名字',
        trigger: 'blur',
    }],
    des: [{
        required: true,
        message: '请输入活动描述',
        trigger: 'blur',
    }],
    url: [{
        required: true,
        message: '请输入图片地址',
        trigger: 'blur',
    }],
    id: [{
        required: true,
        message: '请选择活动时间',
        trigger: 'blur',
    }],
    color: [{
        required: true,
        message: '请选择标题颜色',
        trigger: 'blur',
    }],
    num: [{
        required: true,
        message: '请选择标题颜色',
        trigger: 'blur',
    }, {
        min: 1,
        max: 1000,
        type: 'number',
        massage: '请在1-1000范围内选择',
        trigger: 'blur'
    }],
    location: [{
        required: true,
        message: '请填写举办地址',
        trigger: 'blur',
    }]
})
const ruleFormRef = ref()
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            addActs(form)
                .then((res) => {
                    console.log(res);
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>
<template>
    <el-form :model="form" :rules="rules" ref="ruleFormRef">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="活动描述" prop="des">
            <el-input v-model="form.des" />
        </el-form-item>
        <el-form-item label="活动图片" prop="url">
            <el-input v-model="form.url" />
        </el-form-item>
        <el-config-provider :locale="zhCn">
            <el-form-item label="活动时间" prop="id">
                <el-col :span="11">
                    <el-date-picker v-model="form.id" type="date" placeholder="选择时间" style="width: 100%" format="MM/DD"
                        value-format="MM-DD" />
                </el-col>
            </el-form-item>
        </el-config-provider>

        <el-form-item label="颜色选择" prop="color">
            <el-color-picker v-model="form.color" show-alpha :predefine="[
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)',
                '#c7158577',
            ]" />
        </el-form-item>
        <el-form-item label="人数限制" prop="num">
            <el-input-number v-model.number="form.num" :min="1" :max="1000" />
        </el-form-item>
        <el-form-item label="举办地点" prop="location">
            <el-input v-model="form.location" />
        </el-form-item>
        <el-button @click="submitForm(ruleFormRef)" type="success">提交</el-button>
    </el-form>
</template>